html,body{
	overflow-x: hidden;
}
.top{
    background-color: #fdfcff;
//  height: 4644px;
    .nav_top{
        background-image: url(../images/banner.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding-top: 31px;
        .nav{
            display: flex;
            align-items: center;
            .logo{
                margin-left: 54px;
                margin-right: 50px;
                font-size: 0;
                display: inline-block;
                >img{
                    width: 100%;
                }
            }
            .nav_txt{
                font-size: 0;
                display: inline-block;
                ul{
                    display: flex;
                    color: white;
                    font-size: 17px;
                    width: 687px;
                    justify-content: space-between;
                    a{
                        cursor: pointer;
                        color: white;
                    }
                }
            }
        }
        .introduce{
            margin-top: 158px;
            color: white;
            h1{
                font-size: 65px;
                line-height: 65px;
                text-align: center;
                font-weight: 500;
                margin-bottom: 16px;
            }
            h2{
                font-size: 41px;
                line-height: 41px;
                text-align: center;
                font-weight: 100;
                margin-bottom: 36px;
            }
            p{
                font-size: 21px;
                line-height: 21px;
                text-align: center;
                margin-bottom: 28px;
            }
        }
    }
    .nav_bot{
//      background-image: url(../images/top2_02.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding-top: 13px;
        padding-bottom: 168px;
        text-align: center;
        .button{
            display: inline-block; 
            padding: 20px 60px;
            background-color: #2372bc;
            color: white;
            font-size: 21px;
            line-height: 21px;
            border-radius: 60px;
        }
         
    }
   
    .text{
//      background-image: url(../images/gary4_02.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 1200px;
        position: relative;
        z-index: 1;
    }
}
$wrapper-color:#f5f0ea;
@mixin inner(){
	&{
		>img{
			margin-top: 10%;
		}
		>h3{
			font-size: 30px;
		}
		>p{
			width: 78%;
			margin: 0 auto;
			margin-top: 10%;
			font-size: 20px;
			line-height: 50px;
			em{
				font-weight: bold;
			}
		}
	}
}
.about_hotel,.join{
	width: 800px;
	height: 800px;
	border-radius: 50%;
	background-image: linear-gradient(-30deg,#efeef1,#fdfcff,#f6f5f8 63% );
	position: absolute;
	top: 13.9%;
	left: -2.8125%;
	transform: translate3d(-100%,0,0);
	overflow: hidden;
}
.about_hotel_inner,.join_inner{
	position: absolute;
	top: 13.9%;
	left: -2.8125%;
	width: 692px;
	height: 692px;
	transform: translate3d(-100%,0,0);
	border-radius:50%;
	
	background: white no-repeat;
	background-image: url(../images/bg_hotel.png);
	background-size: 64%;
	background-position: center 14%;
	margin-top: 2.76%;
	margin-left: 2.76%;
	z-index: 2;
	text-align: center;
	@include inner;
}
.link,.link2{
	width: 359px;
	height: 359px;
	background-image: linear-gradient(-120deg,#efeef1,#fdfcff 63%,#f6f5f8  );
	border-radius: 50%;
	position: absolute;
	top: 3.85%;
	left: 35.67%;
	overflow: hidden;
	z-index: 1;
}
.link_inner,.link_inner2{
	position: absolute;
	top: 3.85%;
	left: 35.67%;
	width: 268px;
	height: 268px;
	background-color: #fff;
	border-radius: 50%;
	margin-left: 2.34375%;
	margin-top: 2.34375%;
	z-index: 2;
	text-align: center;
	>img{
		margin-top: 10%;
	}
	>h3{
			font-size: 20px;
		}
}
.about_custom,.arrow{
	width: 1071px;
	height: 1071px;
	background-image: linear-gradient(30deg,#efeef1,#fdfcff,#f6f5f8 63% );
	border-radius: 50%;
	transform: translate3d(100%,0,0);
	position: absolute;
	top: 11.3%;
	right: -15%;
	overflow: hidden;
}
.about_custom_inner,.arrow_inner{
	position: absolute;
	top: 11.3%;
	right: -15%;
	width: 965px;
	height: 965px;
	transform: translate3d(100%,0,0);
	
	border-radius: 50%;
	margin-top: 2.76%;
	margin-right: 2.76%;
	z-index: 1;
	text-align: center;
	background: url(../images/bg_custom.png) no-repeat center 16%;
	background-size: 78%;
	background-color: #fff;
	@include inner();
	>p{
		margin-top: 7%;
	}
	>img{
		margin-top: 9%;
	}
}
.about_custom_inner>.custom{
	margin-top:2% ;
	width: 68%;
}
.bottom{
	position: relative;
	display: block;
	width: 100%;
	margin-top: -18%;
}
.join_inner{
	background-image: url(../images/bg_joinus.png);
}
.arrow_inner{
	background-image: url(../images/bg_ad.png);
	>p{
		margin-top: 3%;
	}
}
@mixin ball(){
	background-color: rgba(43,114,180,0.43);
	border-radius: 50%;
	position: absolute;
	z-index: 5;
}
#rball{
	@include ball();
	top: 10%;
	right: 8.125%;
	width: 236px;
	height: 236px;
	
}
#lball{
	@include ball();
	bottom: 10%;
	left: 9.5%;
	width: 144px;
	height: 144px;
	
}
#bball{
	@include ball();
	bottom: 10%;
	left: 23.8%;
	width: 244px;
	height: 244px;
}
